<template>
  <view class="tn-flex tn-flex-direction-column">
    <view class="tn-margin-top tn-margin-left tn-margin-right tn-safe-area-inset-bottom">
      <!-- 当前页面内容 -->
      <view class="tn-bg-white tn-padding-bottom-xs">
        <view class="list-bg tn-flex tn-flex-row-left tn-flex-col-center" v-for="(item, index) in data" :key="index"  @click="showPreview(item.url)">
          <view class="">
            <view class="type-pic">
              <image class="type-image" :src="item.url" mode="aspectFill"></image>
            </view>
          </view>
          <view class="tn-padding-left clamp-text-2">
            <text class="">{{ item.filename }}</text>
          </view>
        </view>
      </view>
    </view>
  
    <!-- 放大预览图片组件 -->
    <movable-area v-if="preview" scale-area class="movable-area">
      <movable-view class="movable-view" direction="all" scale="true" scale-min="1" scale-max="4" :scale-value="scale">
        <image class="tn-width-full" :src="preview_url" mode="widthFix"></image>
      </movable-view>
      <text class="tn-color-white preview-back tn-icon-power" @click="hiddenPreview"></text>
    </movable-area>
  </view>
</template>

<script>
  import base from '@/common/mixin/base.js';
	import request from '@/common/request.js';
  export default {
    name: 'project-resource-info',
    mixins: [base],
    data(){
      return {
        model: 'business/project/resource',
        data: {},
      }
    },
    props: {
      project_id: {
        type: [String, Number], 
        required: true
      }
    },
    methods: {
      getResource: function() {
        let url = this.model + '/select';
        request.httpRequest(url, {project_id: this.project_id}).then(res => {
          this.data = res;
        });
      },
    },
    created() {
      this.getResource()
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/scss/common.scss';
  
  .list-bg{
    margin: 30rpx;
    padding-top: 30rpx;
  }
  .list-bg + .list-bg{
    border-top: 1rpx solid #d9d9d9;
  }
  .type-image {
    width: 198rpx;
    height: 120rpx;
    object-fit: cover;
  }
  .type-pic {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 18rpx;
    overflow: hidden;
  }
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
